<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="regionVisible"
      width="1100px"
      label-width="100%"
      :close-on-click-modal="false"
      class="gl_dialog_TitleLine gl_dl_footer"
    >
      <div>
        <div class="flex_row">
          <div v-for="(item, index) in region" :key="index" style="margin-top: 10px;margin-right: 20px;">
            <span class="textstyle">{{ item.name }}</span>
            <el-cascader
              ref="myCascader"
              v-model="checkreg[index]"
              size="mini"
              collapse-tags
              :options="[item]"
              :props="props"
              clearable
              @change="changereg(index)"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="regionVisible = false">{{ $t('button.cancel') }}</el-button>
        <!-- 编辑的保存按钮 -->
        <el-button size="mini" :loading="btnLoading" @click="addregion">确定</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import {
  api_GET_District
} from '@/extend/api/gameswaggerApi/common.js';
export default {
  data() {
    return {
      trainning: false,
      competition: false,
      edit: false,
      btnLoading: false,
      props: { multiple: true, value: 'code', label: 'name', emitPath: false },
      regionVisible: false,
      checkreg: [],
      checkname: [],
      checkcode: [],
      region: [],
      title: '地区'
    };
  },
  watch: {
    regionVisible: {
      handler: function() {
        if (!this.regionVisible) {
          this.checkreg = [];
          this.checkname = [];
          this.checkcode = [];
        }
      }
    }
  },
  created() {
    this.apiDistrict();
  },
  methods: {
    apiDistrict() {
      api_GET_District().then(res => {
        this.region = res;
        this.region.map(res => {
          res.children.map(item => {
            item.children = undefined;
          });
        });
      });
    },
    // 重置
    reset() {
      this.checkreg = [];
    },
    changereg(index) {
      if (this.region[index].children?.length === this.checkreg[index]?.length) {
        this.checkname[index] = this.region[index].name;
        this.checkcode[index] = this.region[index].code;
      } else {
        const arranme = [];
        const arrcode = [];
        this.region[index].children.map(res => {
          this.checkreg[index]?.map(jes => {
            if (res.code === jes) {
              arranme.push(res.name);
              arrcode.push(res.code);
            }
          });
        });
        this.checkname[index] = arranme;
        this.checkcode[index] = arrcode;
      }
    },
    addregion() {
      this.btnLoading = true;
      const arrCode = [];
      this.checkcode.map(res => {
        if (Array.isArray(res)) {
          arrCode.push(...res);
        } else {
          arrCode.push(res);
        }
      });
      const arrName = [];
      this.checkname.map(res => {
        if (Array.isArray(res)) {
          arrName.push(...res);
        } else {
          arrName.push(res);
        }
      });
      console.log(this.checkreg);
      console.log(arrCode, arrName);
      if (this.edit === false) {
        this.$parent.tableDataReg.push({ amount: '', publishChargeDistricts: arrCode, publishChargename: arrName });
      } else {
        this.$set(this.$parent.tableDataReg[this.edit], 'amount', this.$parent.tableDataReg[this.edit].amount);
        this.$set(this.$parent.tableDataReg[this.edit], 'publishChargeDistricts', arrCode);
        this.$set(this.$parent.tableDataReg[this.edit], 'publishChargename', arrName);
      }

      this.regionVisible = false;
      this.btnLoading = false;
      this.checkreg = [];
      this.checkname = [];
      this.checkcode = [];
    },
    // 新增地区
    createdis() {
      this.region.map(item => {
        item.disabled = undefined;
        item.children.map(jtem => {
          jtem.disabled = undefined;
        });
      });
      if (this.$parent.tableDataReg.length > 0) {
        this.$parent.tableDataReg.map((res, jndex) => {
          res.publishChargeDistricts.map(jes => {
            this.region.map(item => {
              if (item.code === jes) {
                item.disabled = true;
              }
              item.children.map(jtem => {
                if (jtem.code === jes) {
                  jtem.disabled = true;
                }
              });
            });
          });
        });
      }
      if (this.$parent.create[0].length > 0) {
        this.$parent.create[0].map(jes => {
          this.region.map(item => {
            if (item.code === jes.code && ((this.competition === jes.competition && this.trainning === jes.trainning) || (jes.trainning && jes.competition) || (this.trainning && this.competition))) {
              item.disabled = true;
            }
            item.children.map(jtem => {
              if (jtem.code === jes.code && ((this.competition === jes.competition && this.trainning === jes.trainning) || (jes.trainning && jes.competition) || (this.trainning && this.competition))) {
                jtem.disabled = true;
              }
            });
          });
        });
      }
    },
    // 编辑
    editreg(index, reg) {
      this.region.map(item => {
        item.disabled = undefined;
        item.children.map(jtem => {
          jtem.disabled = undefined;
        });
      });
      const numarr = [];
      this.$parent.tableDataReg.map((res, jndex) => {
        if (jndex === index) {
          res.publishChargeDistricts.map(res => {
            this.region.map((item, xndex) => {
              if (res === item.code) {
                const num = [];
                const numname = [];
                item.children.map(res => {
                  num.push(res.code);
                  numname.push(res.name);
                  numarr.push(res.code);
                });
                console.log(num, numname);
                this.checkreg[xndex] = num;
                this.changereg(xndex);
              }
              item.children.map(jtem => {
                if (jtem.code === res) {
                  this.checkreg[xndex] = res;
                }
              });
            });
          });
        } else {
          res.publishChargeDistricts.map(jes => {
            this.region.map(item => {
              if (item.code === jes) {
                item.disabled = true;
              }
              item.children.map(jtem => {
                if (jtem.code === jes) {
                  jtem.disabled = true;
                }
              });
            });
          });
        }
      });
      // 剔除禁用的属性
      const arr = this.$parent.create[0].filter(item => {
        return numarr.indexOf(item.code) === -1;
      });
      console.log(numarr, arr);
      if (arr.length > 0) {
        arr.map(jes => {
          this.region.map(item => {
            if (item.code === jes.code && ((this.competition === jes.competition && this.trainning === jes.trainning) || (jes.trainning && jes.competition) || (this.trainning && this.competition))) {
              item.disabled = true;
            }
            item.children.map(jtem => {
              if (jtem.code === jes.code && ((this.competition === jes.competition && this.trainning === jes.trainning) || (jes.trainning && jes.competition) || (this.trainning && this.competition))) {
                jtem.disabled = true;
              }
            });
          });
        });
      }
      console.log(this.checkreg);
    }
  }
};
</script>

<style scoped>
.flex_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.textstyle {
display: inline-block;
margin-right: 10px;
width: 130px;
text-align: right;
font-weight: 800;
font-size: 16px;
}
</style>
